<template>
	<view class="c-book-recommend-section mb20">
		<audio id="myaudio" class="hide" src="/static/audio/2.mp3"></audio>
		    <div class="container">
		      <!-- 显示算力区域 -->
		      <div class="text-center">
		        <div class="force">
		          <span style="padding-right: 5px;">当前挖矿算力 +{{count}} </span>
		          <i class="coin"></i>
		        </div>
		      </div>
		      <div id="content" class="content">
		        <div class="inline-block" v-bind:key = index v-for="(item,index) in list" >
		          <div @click="collect(item,index,$event)" class="mine-item topTobottom"  v-bind:style="{left:item.style.left,bottom:item.style.bottom,display:item.style.display}" v-bind:class="Math.random()>0.5?'topTobottom-1':'topTobottom'">
		            <i class="operation mine"></i><p>{{item.currencyName}}</br> +{{item.amount}}</p>
		          </div>
		        </div>
		
		        <div class="mine-item topTobottom-1 mine-item-loading">
		          <i class="operation loading"></i><p>正在挖宝中</p>
		        </div>
		      </div>
		      <div id="foot" class="foot">
		        <ul class="foot-ul">
		          <li><i @click="goWallet" class="operation operation-icon-2"></i><p>火源</p></li>
		          <li><i @click="goTask" class="operation operation-icon-2"></i><p>提升算力</p></li>
		          <li><i @click="goInviting" class="operation operation-icon-2"></i><p>邀请好友</p></li>
		        </ul>
		      </div>
		    </div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			count: 0,
			width:0,
			height:0,
			list:[],
			top_1:0,
			top_2:0
		}
	},
	onLoad() {
		//可以接后台数据
		var init_data = [
		  {
			amount:10
		  },
		  {
			amount:100000
		  },
		  {
			amount:1021
		  },
		  {
			amount:101
		  },
		  {
			amount:102
		  },
		]
		init_data.forEach(function(item,index){
		  item.style = {
			left:0,
			top:0
		  }
		})
		this.list = init_data;
	},
	onShow() {
	},
	onReady() {
		this.getList()
	},
	methods: {
		getList() {
			var boxHeight
			var boxWidth
			var fontsize = parseFloat(10);
			var top_1 = this.top_1
			var top_2 = this.top_2
			const query = uni.createSelectorQuery().in(this);
			query.select('#content').boundingClientRect(data => {
			  //"left":0,"right":414,"top":206.921875,"bottom":478.921875,"width":414,"height":228
			  console.log("得到布局位置信息" + JSON.stringify(data));
			  console.log("节点离页面顶部的距离为" + data.top);
			  top_1 = data.top
			  this.width = data.width
			  this.height = data.height
			  boxHeight = data.height
			  boxWidth = data.width
			  
			}).exec();
			
			query.select('#foot').boundingClientRect(data => {
			  console.log("foot得到布局位置信息" + JSON.stringify(data));
			  console.log("foot节点离页面顶部的距离为" + data.top);
			  top_2 = data.top
			  this.list.forEach(function(item,index){
			  			var site = Math.random();
			  			var site_1 = Math.random();
			  			if(item.currencyName!='eth'){
			  			  if(item.amount>10000){
			  				item.amount = (item.amount/10000)+'W'
			  			  }else if(item.amount>1000){
			  				item.amount = (item.amount/1000)+'K'
			  			  }else {
			  				item.amount = item.amount
			  			  }
			  			}
			  			// 很随便的位置随机，可以自己修改
			  			item.style = {
			  			  'left':site*boxWidth+(7*fontsize)<boxWidth?site*boxWidth +'px':site*boxWidth-(7*fontsize)-100 +'px',
			  			  'bottom':site_1*boxHeight+(8*fontsize)+top_1<top_2?site_1*boxHeight+top_1+'px':site_1*boxHeight+top_1-200+'px'
			  			};
			  			// console.log(item.style)
			  })
			}).exec(
				
				
			);
			// 
			// console.log("top_1" +top_1)
		  
		  
		  // console.log(this.list)
		  return this.list;
		},
			
		collect:function(item,index,e){
		      var width = e.currentTarget.offsetLeft;
			  // var boxWidth = document.getElementById('content').clientWidth;
			  var boxWidth;
			  var _this = this;
			  _this.ScanAudio();
			  var query = uni.createSelectorQuery();
			      query.select('#content').boundingClientRect(function (rect) {
					boxWidth = rect.width
			      }).exec();
				  
		      // var size = 10 * (boxWidth / 360);
		      // var toleft = 1-(width/size-4.3)/2+'rem';
			  _this.list[index].style = {left:"1rem",bottom:'0.5rem'};
		      setTimeout(function(){
				_this.list[index].style = {display:'none'}
		      },1000)
		    },
		    goWallet:function(){
		      // 回调方法
			  uni.navigateTo({
			     url: '/pages/wallet/wallet'
			  });
		    },
		    goTask:function(){
		      // 回调方法
			  uni.navigateTo({  
				  url: '/pages/task/task'  
			  })
		    },
		    goInviting:function(){
		      // 回调方法
			  uni.navigateTo({
			      url: '/pages/share/pic-share'
			  });
		    }
	}
};
</script>

<style lang="scss" scope>
/* 动画 */
@keyframes topTobottom
{
0%   {transform:translate(0,0)}
50%  {transform:translate(0,6px)}
100% {transform:translate(0,0)}
}

@-moz-keyframes topTobottom /* Firefox */
{
  0%   {transform:translate(0,0)}
  50%  {transform:translate(0,6px)}
  100% {transform:translate(0,0)}
}

@-webkit-keyframes topTobottom /* Safari 和 Chrome */
{
  0%   {transform:translate(0,0)}
  50%  {transform:translate(0,6px)}
  100% {transform:translate(0,0)}
}

@-o-keyframes topTobottom /* Opera */
{
  0%   {transform:translate(0,0)}
  50%  {transform:translate(0,6px)}
  100% {transform:translate(0,0)}
}

@keyframes toHide
{
  from {}
  to {left:1rem;bottom:1rem}
}
html,body{
  margin: 0;
  padding: 0;
}
ul,li{
  padding:0;
  margin:0;
  list-style:none;
}
p{
  margin: 0;
}
.hide{
  visibility: hidden;
}
.container{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583577256892&di=afc6e0bb0f54f418e8e3c46aea899f70&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F13%2F20150913215156_sUvdE.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.text-center{
  text-align: center;
}
.force{
  color: #fff;
  padding: 0.3rem 1.2rem;
  background: #0c2778;
  border: 1px solid #4c7cca;
  font-size: 11px;
  display: inline-block;
  border-radius: 4px;
  margin-top: 4rem;
}
.coin{
  display: inline-block;
  width: 11px;
  height: 11px;
  background: url('');
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: -0.11rem;
}
.content{
  /* position: relative; */
  height: calc(100% - 20rem);
}
.mine-item{
  text-align: center;
  color: #fff;
  display: inline-block;
  position: absolute;
  z-index: 3;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease-out;
}
.topTobottom{
  animation-name: topTobottom;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.topTobottom-1{
  animation-name: topTobottom;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-delay:1s;
  animation-iteration-count: infinite;
}
.toHide{
  animation: toHide;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
.mine-item-loading{
  left: 50%;
  top: 50%;
  margin-left: -1.5rem;
  margin-top: -4rem;
  z-index: 1;
}
.mine-item > p {
  font-size: 11pX;
  /* width: 4.3rem;
  overflow: hidden; */
}
.mine-item-loading > p{
  width: auto;
}
.mine{
  background: url('');
}
.loading{
  background: url('');
}
.foot{
  position: absolute;
  bottom: 1rem;
  width: 100%;
}
.foot-ul li{
  display: inline-block;
  margin: 0 1rem;
  text-align: center;
  color: #fff;
}
.foot-ul li:last-child{
  float: right;
}

.operation-icon-2{
  background: url('');
}

.operation{
  display: inline-block;
  width: 40PX;
  height: 40PX;
  margin-bottom: 0.5rem;
  background-size: cover;
  background-repeat: no-repeat;
}
.foot-ul li p{
  font-size: 11PX;
}
.inline-block{
  display: inline-block;
}

</style>
